<template>
    <button class="btn"  @click="plusUser" title="添加用户"><el-icon><Plus/></el-icon></button>
    <el-dialog v-model="dialogVisible" title="添加用户" width="90%" destroy-on-close>
       <template #footer>
        <el-form :model="formData" ref="vForm" :rules="rules" label-position="left" label-width="80px"
          size="default">
          <el-row>
            <el-col :span="8" class="grid-cell">
              <el-form-item label="学生姓名" prop="nickName" class="required label-center-align">
                <el-input v-model="formData.nickName" type="text" clearable></el-input>
              </el-form-item>
              <el-row>
              </el-row>
              <el-form-item label="登录账号" prop="userName" class="required">
                <el-input v-model="formData.userName" type="text" clearable></el-input>
              </el-form-item>
              <el-form-item label="邮箱地址" prop="email" class="required label-center-align">
                <el-input v-model="formData.email" type="text" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" class="grid-cell">
              <el-form-item label="学生性别" prop="gender" class="required label-center-align">
                <el-radio-group v-model="formData.gender">
                  <el-radio v-for="(item, index) in genderOptions" :key="index" :label="item.value"
                    :disabled="item.disabled" style="{display: inline}">{{item.label}}</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-row>
              </el-row>
              <el-form-item label="登录密码" prop="password" class="required label-center-align">
                <el-input v-model="formData.password" type="password" clearable></el-input>
              </el-form-item>
              <el-form-item label="手机号码" prop="phone" class="required label-center-align">
                <el-input v-model="formData.phone" type="text" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" class="grid-cell">
              <el-form-item label="上传图片" prop="imageUpload" class="required label-center-align">
                <el-upload :file-list="imageUploadFileList" :headers="imageUploadUploadHeaders"
                  :data="imageUploadUploadData" list-type="picture-card" show-file-list :limit="3"> <template
                    #default><i class="el-icon-plus"></i></template></el-upload>
              </el-form-item>
              <el-form-item label="QQ号码" prop="qqNumber" class="required label-center-align">
                <el-input v-model="formData.qqNumber" type="text" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="个性签名" prop="signature" class="required label-center-align">
            <el-input type="textarea" v-model="formData.signature" rows="4"></el-input>
          </el-form-item>
          <el-form-item label="个人简介" prop="introduction" class="required label-center-align">
            <el-input type="textarea" v-model="formData.introduction" rows="4"></el-input>
          </el-form-item>
          <div class="static-content-item">
            <div>所属班级</div>
          </div>
          <el-row>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="所有班级" prop="allClasses" class="required label-center-align">
                <el-select v-model="formData.allClasses" class="full-width-input" clearable filterable>
                  <el-option v-for="(item, index) in allClassesOptions" :key="index" :label="item.label"
                    :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="指定班级" prop="specifyClass" class="required label-center-align">
                <el-select v-model="formData.specifyClass" class="full-width-input" clearable filterable>
                  <el-option v-for="(item, index) in specifyClassOptions" :key="index" :label="item.label"
                    :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
         <span class="dialog-footer">
           <el-button type="primary" @click="submit">
             确认
           </el-button>
           <el-button type="primary" @click="dialogVisible = false">
             取消 
           </el-button>      
         </span>
       </template>
     </el-dialog>
   </template>
   <script>
   import { Plus } from '@element-plus/icons-vue';
    export default {
       name: 'PLUS_USER_TABLE',
       props:["userList"],
       components:{
        Plus
    },
    data: function(){
       return {
           dialogVisible:false,
           formData: {
              nickName: "",
              userName: "",
              email: "",
              gender: "",
              password: "",
              phone: "",
              imageUpload: null,
              qqNumber: "",
              signature: "",
              introduction: "",
              allClasses: 3,
              specifyClass: 1,
            },
            rules: {
              nickName: [{
                required: true,
                message: '字段值不可为空',
              }],
              userName: [{
                required: true,
                message: '字段值不可为空',
              }],
              email: [{
                required: true,
                message: '字段值不可为空',
              }, {
                pattern: /^([-_A-Za-z0-9.]+)@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/,
                trigger: ['blur', 'change'],
                message: '请输入邮箱地址'
              }],
              gender: [{
                required: true,
                message: '字段值不可为空',
              }],
              password: [{
                required: true,
                message: '字段值不可为空',
              }, {
                pattern: /^[A-Za-z0-9]+$/,
                trigger: ['blur', 'change'],
                message: '请输入数字+字母'
              }],
              phone: [{
                required: true,
                message: '字段值不可为空',
              }, {
                pattern: /^[-]?\d+(\.\d+)?$/,
                trigger: ['blur', 'change'],
                message: '请输入数字'
              }],
              imageUpload: [{
                required: true,
                message: '字段值不可为空',
              }],
              qqNumber: [{
                required: true,
                message: '字段值不可为空',
              }, {
                pattern: /^[-]?\d+(\.\d+)?$/,
                trigger: ['blur', 'change'],
                message: '请输入数字'
              }],
              signature: [{
                required: true,
                message: '字段值不可为空',
              }],
              introduction: [{
                required: true,
                message: '字段值不可为空',
              }],
              allClasses: [{
                required: true,
                message: '字段值不可为空',
              }],
              specifyClass: [{
                required: true,
                message: '字段值不可为空',
              }],
            },
            genderOptions: [{
              "label": "男",
              "value": 1
            }, {
              "label": "女",
              "value": 2
            }],
            allClassesOptions: [{
              "label": "Python",
              "value": 1
            }, {
              "label": "测试班级",
              "value": 2
            }, {
              "label": "沙雕聚集班",
              "value": 3
            }, {
              "value": 4,
              "label": "猛男训练班"
            }],
            specifyClassOptions: [{
              "label": "Java班",
              "value": 1
            }, {
              "label": "BigData班",
              "value": 2
            }, {
              "label": "Vue内训班",
              "value": 3
            }],
            imageUploadFileList: [],
            imageUploadUploadHeaders: {},
            imageUploadUploadData: {},
       }
       },
      computed: {},
      watch: {},
      created() {},
      methods:{
           plusUser(){
              this.dialogVisible = true;
           },  
           submit(){
            var that = this;
            this.formData.userUuid = sessionStorage.getItem('token1');
            window.http.post('/api/user/PlusUser',this.formData).then(res => {
            console.info(JSON.stringify(res));
              var data = res.data;
              if(data.success){
                that.$message.success('添加成功');
                this.dialogVisible = false;
              }else{
                that.$message.error('添加失败');
              } 
            })
            .catch(function(error){
              that.$message.error('服务器异常');
            })
        },
        submitForm() {
        this.$refs['vForm'].validate(valid => {
          if (!valid) return
          //TODO: 提交表单
        })
      },
      resetForm() {
        this.$refs['vForm'].resetFields()
      }
       },
    }
   </script>
   <style lang="scss">
      html,
      body, 
      #app{
      height: 100%;
      }
   .el-input-number.full-width-input,
   .el-cascader.full-width-input {
     width: 100% !important;
   }
   
   .el-form-item--medium {
     .el-radio {
       line-height: 36px !important;
     }
     
     .el-rate {
       margin-top: 8px;
     }
   }
   
   .el-form-item--small {
     .el-radio {
       line-height: 32px !important;
     }
     
     .el-rate {
       margin-top: 6px;
     }
   }
   
   .el-form-item--mini {
     .el-radio {
       line-height: 28px !important;
     }
     
     .el-rate {
       margin-top: 4px;
     }
   }
   
   .clear-fix:before,
   .clear-fix:after {
     display: table;
     content: "";
   }
   
   .clear-fix:after {
     clear: both;
   }
   
   .float-right {
     float: right;
   }
   
 </style>
 
 <style lang="scss" scoped>
   div.table-container {
     table.table-layout {
       width: 100%;
       table-layout: fixed;
       border-collapse: collapse;
 
       td.table-cell {
         display: table-cell;
         height: 36px;
         border: 1px solid #e1e2e3;
       }
     }
   }
   
   .label-left-align ::v-deep .el-form-item__label {
     text-align: left;
   }
   
   .label-center-align ::v-deep .el-form-item__label {
     text-align: center;
   }
   
   .label-right-align ::v-deep .el-form-item__label {
     text-align: right;
   }
 
   .static-content-item {
     min-height: 20px;
     display: flex;
     align-items: center;
 
     ::v-deep .el-divider--horizontal {
       margin: 0;
     }
   }
   .container {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       width: 100%;
       height: 100%;
   
       }
       .tr{
       width: 200px;
       flex-basis: 50px;
       display: flex;
       flex-direction: row;
       justify-content: space-between;
       background-color: beige;
       align-items: center;
       }
       .second{
       background-color: aqua;
       }
 </style>
 